<template>
  <div class="Details">
    <div class="Detailstop">
      <img :src="'bimg/'+ bookbox.pic" alt />
    </div>

    
 
      <div @click="tohome">
        <van-nav-bar class="nav" left-arrow></van-nav-bar>
      </div>
      <div class="bsl" @click="tobookshelf">书架</div>
  


    <div class="Detopm">
      <img :src="'bimg/'+bookbox.pic" />
      <div class="Detopms">
        <p class="bookname">{{bookbox.title}}</p>
        <p>作者：{{bookbox.ather}}</p>
        <p>类型：{{bookbox.category}}</p>
        <p>状态：{{bookbox.state}}</p>
      </div>
    </div>

    <div class="detow">
      <span @click="Dialog">推荐</span>
      <span @click="share">分享</span>
      <span @click="baocuo">报错</span>
    </div>

    <div class="deintroduction" :style="{ height:gh+'rem'}">
      <span class="deintop">简介</span>
      <van-icon class="bi" name="edit" />
      <div class="deinma">{{bookbox.main}}</div>
    </div>
    <div class="dedo" @click.stop="up">
      <van-icon :name="iconname" />
    </div>
    <div class="advertisement">
      <img v-if="des" src="bimg/guanggaos.jpg" alt />
      <span @click="nonead" v-if="des">
        <van-icon name="cross" />
      </span>
    </div>
    <div class="decatalog">
      <span class="catalog">目录</span>
      <van-icon name="ellipsis" />
      <div class="chapter">
        <span class="updata">更新到:</span>
        <span>{{bookbox.zj}}</span>
      </div>
    </div>
    <div class="deevaluate">
      <div>
        <span class="catalog">书友评价</span>
      </div>
      <div class="evaluatebo">
        <span>天下</span>
        <span>看看云评</span>
        <span>
          <van-icon name="description" />
        </span>
      </div>
    </div>
    <van-dialog class="share" v-model="shows" title="标题" show-cancel-button>
      <div>
        <span>(温馨提示：请截图分享给您的好友)发送给好友的截图内容是：</span>
          <p class="main">我正在看《{{this.bookbox.title}}》小说，免费阅读均在天天看。下载：</p>
      </div>
      <img class="sharepic" src="bimg/share.jpg" />
    </van-dialog>
    <div class="more">更多评论</div>
    <div class="defoot">
      <span is-link @click="showPopup">加入书架</span>
      <van-popup v-model="show">请先登录</van-popup>
      <span class="read" @click="read">立即阅读</span>
      <span @click="all">全本缓存</span>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import foot from "@/components/foot.vue";
import Header from "@/components/Header.vue";
import { Icon } from "vant";
export default {
  name: "Home",
  components: {
    foot,
    Header,
  },
  data() {
    return {
      iconname: "arrow-down",
      sum: 0,
      gh: 2.1,
      des: true,
      bookbox: [],
      show: false,
      books: [],
      shows:false,
    };
  },
  methods: {
    up() {
      this.sum += 1;
      if (this.sum % 2 == 0) {
        this.iconname = "arrow-up";
        this.gh = 3;
      } else {
        this.iconname = "arrow-down";
        this.gh = 1.8;
      }
    },

    tobookshelf() {
      this.$router.push("/Bookshelf");
    },
    tohome() {
      this.$router.push("/Home");
    },
    nonead() {
      this.des = false;
    },
    read(){
      this.$router.push('/read')
    },
    showPopup() {
      if (localStorage.getItem("key") == null) {
        this.show = true;
      } else {
        this.show = false;
        var book = JSON.parse(localStorage.getItem("bookh")) || [];
        console.log(book)
        if (book.length == 0) {
          book.push(this.bookbox);
          localStorage.setItem("bookh", JSON.stringify(book));
        } else {
          book.push(this.bookbox);

          // function unique(arr) {
          //   return Array.from(new Set(arr));
          // }
          function getUnique2(arr) {
            const map = {};
            // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉）
            arr.forEach(
              (item) =>
                (map[
                  JSON.stringify(item, [
                    "ather",
                    "category",
                    "chapter",
                    "main",
                    "pic",
                    "score",
                    "state",
                    "title",
                    "zj",
                  ])
                ] = item)
            );

            // 2、再把新对象的键名抽成一个数组返回即为不重复的集合
            return Object.keys(map).map((key) => JSON.parse(key));
          }
          book = getUnique2(book);
          localStorage.setItem("bookh", JSON.stringify(book));
        }
        localStorage.setItem("bookboxs", JSON.stringify(this.bookbox));
        alert("已加入书架");
      }
    },
     Dialog() {
      this.user = localStorage.getItem("key");
      console.log(this.user);
      if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录！",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        this.$dialog
          .confirm({
            message: "推荐成功，谢谢您，对本书单的推荐！",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      }

    },
    baocuo(){
      // console.log(1)
      this.$router.push('/report')
    },
    share(){
      this.shows=true
    },
    all(){
      this.user = localStorage.getItem("key");
      console.log(this.user);
      if (this.user == null) {
        this.$dialog
          .confirm({
            message: "您还没有登录，请登录！",
            confirmButtonColor: "red",
          })
          .then(() => {
            this.$router.push("/denglv");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        this.$dialog
          .confirm({
            message: "感谢您对我们的支持,由于版权原因，暂不支持缓存",
            confirmButtonColor: "red",
          })
          .then(() => {
            console.log("点击了确认");
          })
          .catch(() => {
            console.log("点击了取消");
          });
      }
    }
  },
  mounted() {
    // var haha = []
    this.bookbox = JSON.parse(localStorage.getItem("bookbox"));
    // this.books = JSON.parse(localStorage.getItem("bookbox"));
    // var book = JSON.parse(localStorage.getItem("bookh")) || [];
    // if (book.length == 0) {
    //   book.push(this.bookbox);
    //   localStorage.setItem("bookh", JSON.stringify(book));
    // } else {
    //   book.push(this.bookbox);
    //   localStorage.setItem("bookh", JSON.stringify(book));
    // }
    // // book.push(this.bookbox)
    // // console.log(this.books)
    // // this.books.push(book)
    // // console.log(this.books)
    // localStorage.setItem("bookh", JSON.stringify(book));

    // console.log(localStorage.getItem('bookh'))
    console.log(this.bookbox);
    console.log(this.books);
  },
};
</script>

<style  scoped>
.Detailstop {
  width: 100%;
  height: 5rem;
  position: relative;
  z-index: -1;
}
.Detailstop img {
  width: 100%;
  height: 5rem;
  filter: blur(15px);
  opacity: 0.8;
}
.van-nav-bar {
  position: absolute;
  top: 0px;
  background: rgba(255, 255, 255, 0.001);
}
.tops{
  display: flex;
  width: 100%;
  height: 1.25rem;
  position: absolute;
  top: .1rem;
}
.bsl {
  border: 0.02rem solid #fff;
  position: absolute;
  font-size: 0.4rem;
  padding: 0.1rem;
  top: 0.2rem;
  right: 0.5rem;
  border-radius: 0.1rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
/* 头部内容 */
.Detopm {
  position: absolute;
  top: 1.3rem;
  height: 2.8rem;
  display: flex;
  justify-content: space-around;
}
.Detopm img {
  width: 23%;
}
.Detopms {
  height: 2.8rem;
  width: 4rem;
  display: flex;
  color: #fff;
  font-size: 0.3rem;
  flex-direction: column;
  justify-content: space-evenly;
}
.bookname {
  font-size: 1.8em;
}
.detow {
  padding-top: 0.4rem;
  padding-bottom: 0.2rem;
  height: 0.8rem;
  font-size: 0.4rem;
  line-height: 0.8rem;
  text-align: center;
  border-bottom: 0.2rem solid rgb(248, 234, 234);
}
.detow span {
  display: inline-block;
  width: 33%;
  height: 0.8rem;
}
.detow span:not(:first-child) {
  border-left: 0.01rem solid rgb(160, 153, 153);
}
.deintroduction {
  margin: 0.3rem;
  /* height: 2.1rem; */

  overflow: hidden;
}
.deintop {
  font-size: 0.4rem;
  font-weight: 700;
}
.deinma {
  color: rgb(102, 94, 94);
  font-size: 0.2rem;
}
/* icon */
.dedo {
  width: 100%;
  text-align: center;
  height: 0.3rem;
  /* background-color: rgb(207, 176, 176); */
  /* border-bottom: 0.2rem solid rgb(248, 234, 234); */
}
/* 目录 */
.decatalog {
  padding: 0.3rem;
  height: 1rem;
  border-bottom: 0.2rem solid rgb(248, 234, 234);
}
.catalog {
  font-size: 0.6rem;
  font-weight: 600;
}
.chapter {
  margin-top: -0.6rem;
  text-align: center;
  font-size: 0.4rem;
  color: rgb(102, 94, 94);
}
.updata {
  font-size: 0.5rem;
}
.advertisement {
  height: 2rem;
  border-bottom: 0.2rem solid rgb(248, 234, 234);
  background-color: #fff;
}
.advertisement img {
  width: 100%;
  height: 2rem;
}
.advertisement span {
  position: relative;
  top: -2rem;
  left: 0.1rem;
  z-index: 2;
}
/* 评论 */
.deevaluate {
  height: 3.1rem;
  padding: 0.3rem;
}
.evaluatebo {
  margin-top: 0.3rem;
  font-size: 0.4rem;
}
.more {
  height: 1rem;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1rem;
  color: rgb(12, 27, 241);
  border-bottom: 0.2rem solid rgb(248, 234, 234);
}
.defoot {
  height: 1.5rem;
  background-color: #fff;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1.5rem;
  position: fixed;
  bottom: 0rem;
  color: rgba(2, 154, 255);
  width: 100%;
}
.defoot span {
  display: inline-block;
  width: 33.333333%;
  height: 1.5rem;
}
.read {
  background-color: rgba(2, 154, 255);
  color: #fff;
}
.bi {
  position: absolute;
  right: 0.3rem;
}
/* 分享 */
.share{
  height: 10rem;
}
.sharepic{
 margin-left: 34.5%;
}
.main{
  text-align: left;
  margin-top: 1rem;
  margin-left: .2rem;
}
</style>